Angular Material এর MatTable কম্পোনেন্টটি একটি শক্তিশালী টুল, যা ডেটা টেবিল তৈরি করতে সহায়ক। এর সাথে MatSort ডিরেকটিভ ব্যবহার করে টেবিলের ডাটা সহজেই সাজানো (sorting) করা যায়। এই ফিচারটি ব্যবহারকারীদের সুবিধার্থে ডেটা দ্রুত সাজানোর সুযোগ প্রদান করে, যেমনঃ নামের অর্ডার, তারিখের অর্ডার ইত্যাদি।

এখানে, Angular Material এর মাধ্যমে টেবিলের ডাটা সাজানোর (sorting) প্রক্রিয়া কীভাবে কাজ করে তা দেখানো হলো।

প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে MatTableModule এবং MatSortModule মডিউলগুলি আপনার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে:

import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';

@NgModule({
  imports: [
    MatTableModule,
    MatSortModule
  ]
})
export class AppModule { }

টেবিলের ডাটা সাজানো (Sorting) HTML কোড

Angular Material এর MatSort ডিরেকটিভ ব্যবহার করে টেবিলের কলামগুলো সাজানো (sorting) করা যায়। প্রথমে টেবিলের HTML টেমপ্লেট তৈরি করুন এবং mat-sort-header ডিরেকটিভ যোগ করুন প্রতিটি কলামের জন্য, যেখানে আপনি সাজানোর ক্ষমতা চান।

HTML উদাহরণ:

<table mat-table [dataSource]="dataSource" matSort aria-label="Example table with sorting">
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Age Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <!-- Address Column -->
  <ng-container matColumnDef="address">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
    <td mat-cell *matCellDef="let element"> {{element.address}} </td>
  </ng-container>

  <!-- Header and Row Definitions -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে:

• mat-sort-header: এই ডিরেকটিভটি ব্যবহার করে প্রতিটি কলামে সাজানোর (sorting) ক্ষমতা যোগ করা হচ্ছে।
• mat-header-cell: কলামের শিরোনাম যা ব্যবহারকারীদের সাজানোর জন্য ক্লিকযোগ্য করবে।
• mat-cell: প্রতিটি সেল, যেখানে ডেটা প্রদর্শিত হবে।

TypeScript কোড: ডাটা সাজানোর জন্য সেটআপ

এখন, MatSort ব্যবহার করতে, আপনাকে MatTableDataSource এবং MatSort ইনিশিয়ালাইজ করতে হবে। এর মাধ্যমে ডেটা সরবরাহ করা হবে এবং এটি টেবিলের ডাটাকে সাজানোর ক্ষমতা দেবে।

TypeScript উদাহরণ:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['name', 'age', 'address'];
  dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }
}

export interface Element {
  name: string;
  age: number;
  address: string;
}

const ELEMENT_DATA: Element[] = [
  {name: 'John', age: 25, address: 'New York'},
  {name: 'Jane', age: 30, address: 'London'},
  {name: 'Jack', age: 35, address: 'Paris'},
  {name: 'Jill', age: 40, address: 'Tokyo'},
];

এখানে:

• MatTableDataSource: এটি একটি টেবিল ডেটার সোর্স যা Angular Material টেবিলের জন্য ব্যবহৃত হয়।
• MatSort: এটি ডেটাকে সাজানোর (sorting) ক্ষমতা যোগ করে। @ViewChild(MatSort) ডিরেকটিভ ব্যবহার করে MatSort কম্পোনেন্টটি টেবিলের সাথে যুক্ত করা হচ্ছে।
• displayedColumns: এখানে আমরা টেবিলের যে কলামগুলো দেখাতে চাই তা তালিকাভুক্ত করেছি। এই অ্যারের মাধ্যমে আমরা HTML এ কলামগুলোকে সংজ্ঞায়িত করি।

ডাটা সাজানো (Sorting) কাজ করবে কিভাবে?

• টেবিলের শিরোনামে ক্লিক করা হলে: যখন ব্যবহারকারী কলামের শিরোনামে ক্লিক করবে, তখন সেই কলামের ডেটা সাজানো হবে (ascending অথবা descending অর্ডারে)।
• টেবিলের ডাটা সোর্স: Angular Material MatTableDataSource এর মাধ্যমে ডেটাকে প্রক্রিয়া করে এবং সাজানো (sorting) ও ফিল্টারিং ফিচার সমর্থন করে।

ফিল্টারিং যুক্ত করা

ডেটা সাজানোর সাথে সাথে আপনি ডেটা ফিল্টারিংও যোগ করতে পারেন, যা ডেটা খোঁজার সুবিধা প্রদান করবে।

ফিল্টারিং HTML

<input matInput (keyup)="applyFilter($event)" placeholder="Filter">

ফিল্টারিং TypeScript

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();

  if (this.dataSource.paginator) {
    this.dataSource.paginator.firstPage();
  }
}

এখানে, applyFilter() ফাংশনটি keyup ইভেন্টের মাধ্যমে কল হয়, এবং এটি টেবিলের ডেটার মধ্যে ফিল্টার অ্যাপ্লাই করে।

Angular Material Table এর মাধ্যমে ডেটা সাজানো (sorting) একটি সহজ এবং কার্যকরী উপায়। MatSort ডিরেকটিভ এবং MatTableDataSource এর সাহায্যে আপনি খুব সহজেই ডেটা টেবিল সাজাতে পারেন এবং ব্যবহারকারীকে একটি ইন্টারঅ্যাকটিভ ইউজার এক্সপেরিয়েন্স প্রদান করতে পারেন। আপনি চাইলে ফিল্টারিং, পেজিনেশন এবং অন্যান্য কাস্টম ফিচারও একত্রে যোগ করতে পারেন।